<!DOCTYPE html>
<html lang="en">

<head>
	<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css" rel="stylesheet"> -->
	<link href="./vendor/bootstrap-grid.css" rel="stylesheet">
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />

	<!-- Font Awesome Icons -->
	<link rel="stylesheet" type="text/css" href="./assets/font/iconfont.css" />
	<link rel="stylesheet" href="./assets/layui/css/layui.css">
	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />

	<style>
		.layui-form-pane .layui-form-label{
			width: 150px;
		}
		.layui-form-pane .layui-input-block{
			margin-left: 150px;
		}
		input::-webkit-input-placeholder {
		    /* WebKit browsers */
		    font-size:14px;
		    color: #333;
		}
		input::-moz-placeholder {
		    /* Mozilla Firefox 19+ */
		    font-size:14px;
		    color: #333;
		}
		input:-ms-input-placeholder {
		    /* Internet Explorer 10+ */
		    font-size:14px;
		    color: #333;
		}
		.layui-tree-icon{
			width: 18px;
			height: 16px;
		}
		.demo-transfer{
			height: 220px;
			overflow-y: scroll;
		}

		.table tr:last-child {
		    border: none;
		}

		.table tr th {
		    background-color: #4476A7;
		    color: #fff;
		    font-weight: 400;
		    text-align: center;
		    position: relative;
		}

		.table tr th::after {
		    content: '';
		    width: 1px;
		    height: 12px;
		    position: absolute;
		    right: 0;
		    background-color: #fff;
		    top: 50%;
		    transform: translateY(-50%);
		}

		.table tr th:last-child::after {
		    content: '';
		    width: 0;
		    height: 0;
		    background-color: transparent;
		}

		.table tr td {
		    text-align: center;
		    border: 1px solid green;
		    border-top: 1px solid green;
		    vertical-align: baseline;
		    position: relative;
		}
		.table tr td select {
		    width: 80%;
		    outline: none;
		    border: none;
		    appearance: none;
		    -webkit-appearance: none;
		    -moz-appearance: none;
		}

		table tr td input {
		    outline: none;
		    border: none;
		    text-align: center;
		    width: 100%;
		}

		table tr td:last-child {
		    border: none;
		}
		.keyWordPop{
			padding: 10px 0px;
		}
		.classifyBox{
			width: 200px;
			overflow-y: scroll;
		}
		.classifyBox ul li{
			cursor: pointer;
			font-size: 14px;
			margin: 10px 0;
		}
		.keywordBox{
			padding: 0 5px;
			overflow-y: scroll;
		}
		.keywordBox button{
			margin-bottom: 10px;
		}
		.layui-form-pane .layui-form-switch{
			margin-top: -4px;
		}
		.keyWordLable .layui-btn{
			margin-right: 10px;
			cursor: auto;
		}
		.keyWordLable .layui-btn i{
			cursor: pointer;
		}
		.layui-tab-content{
			padding: 0;
		}
		.table th, .table td{
			padding: 0px 5px;
			height: 40px;
			line-height: 40px;
		}
	</style>
</head>

<body>


	<main class="container">

		<!--------------------------------------
PRICING
--------------------------------------->
		<section class="pt-4 pb-5">
			<div class="col-md-12">
				<form id="form1" class="layui-form layui-form-pane" lay-filter="applyMadeForm">
					<div class="layui-form-item" style="font-size: 14px;">
					    <label class="layui-form-label">数据引擎配置ID</label>
					    <div class="layui-input-block">
						   <input type="text" class="layui-input dataResourceId" disabled >
					    </div>
					</div>
					<div class="layui-form-item" style="font-size: 14px;">
					    <label class="layui-form-label">配置资源方式</label>
					    <div class="layui-input-block">
					      <input type="radio" name="Type" lay-filter="operateType" value="0" title="人工录入" checked="">
					      <input type="radio" name="Type" lay-filter="operateType" value="1" title="导入资源文件">
					      <input type="radio" name="Type" lay-filter="operateType" value="2" title="自动获取资源">
					    </div>
					</div>
					<div class="layui-form-cont">
						<div class="allArtificial cont-item">
							<div class="layui-tab layui-tab-brief" lay-filter="dataRegistr">

								<div class="layui-tab-content">
									<div class="col-md-12">
										<table class="table" id="databaseSQL">
										    <thead>
										        <tr>
										            <th>序号</th>
										            <th>数据库表别名</th>
										            <th>数据库表名</th>
													<th>表关键字</th>
													<th>备注说明</th>
										            <th style="width: 80px;background-color: #fff;border:none;">
														<span class="add addTrItem"><img class="" src="assets/img/demo/add.png" title="新增" alt="新增" style="width:30px;cursor: pointer;"></span>
													</th>
										        </tr>
										    </thead>
										    <tbody>

										    </tbody>
										</table>
										<div id="databaseSQLPage"></div>
									</div>
									<div class="col-md-12">
											<div class="control mb-2">
											   <form class="layui-form"  lay-filter="SesourceContentForm" >
													<div class="row form-group">
														<div class="col">
															<label>当前选择表结构</label>
															<select class="form-control SesourceContentId">
																<option value="">请选择</option>
															</select>
														</div>

													</div>


											    <table class="table" id="sesourceContent" style="margin-bottom: 0;">
											        <thead>
											            <tr>
											                <th>序号</th>
											                <th>资源名称</th>
											                <th>对应结构</th>
											                <th>备注说明</th>
											                <th style="width: 80px;background-color: #fff;border:none;">
											                	<span class="add addTrItem"><img class="" src="assets/img/demo/add.png" title="新增" alt="新增" style="width:30px;cursor: pointer;"></span>
											                </th>
											            </tr>
											        </thead>
											        <tbody>

											        </tbody>
											    </table>
											    </form>
											</div>
										</div>
								</div>
								<!-- <div style="float: right;">
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3" id="saveAllForm">保存</button>
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3" id="submitAllForm">提交</button>
								</div> -->
							</div>
						</div>
						<div class="halfArtificia cont-item disabledNone">
							<div class="layui-form-item resourceFileBox" style="font-size: 14px;">
								<label class="layui-form-label">上传资源文件</label>
								<div class="layui-input-block">
								  <input type="file" class="form-control" style="font-size: 13px;" value="请选择上传资源文件" id="resourceFile">
								</div>
							</div>
							<div class="layui-form-item" style="font-size: 14px;">
								<label class="layui-form-label">上传规则文件</label>
								<div class="layui-input-block">
								  <input type="file" class="form-control" style="font-size: 13px;" value="请选择上传规则文件" id="ruleFile">
								</div>
							</div>
							<div id="fileAnalysis" class="disabledNone" style="color: red;padding-left: 150px;font-size: 14px;"><p>提示：JSON文件解析完毕</p></div>
							<div class="layui-form-item halfArtificiaChild disabledNone" style="font-size: 14px;">
								<label class="layui-form-label">当前资源</label>
								<div class="layui-input-block">
								  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="点击下方资源表或者字段进行设置" class="layui-input resourcesTitle">
								</div>
							</div>
							<div class="layui-form-item halfArtificiaChild disabledNone" style="font-size: 14px;">
								<label class="layui-form-label">当前资源别名</label>
								<div class="layui-input-block">
								  <input type="text" name="anotherName" lay-verify="anotherName" autocomplete="off" placeholder="请输入资源别名" class="layui-input anotherName">
								</div>
							</div>
							<!-- <div class="layui-form-item disabledNone sourceCont" style="font-size: 14px;">
								<label class="layui-form-label">当前资源类型</label>
								<div class="layui-input-block">
									<select name="dataType" lay-verify="dataType" class="dataType">
										<option value="">请选择</option>
										<option value="0">整数</option>
										<option value="1">长整数</option>
										<option value="2">字节</option>
										<option value="3">浮点数</option>
										<option value="4">时间</option>
										<option value="5">字符串</option>
									</select>
								  <input type="text" name="dataType" lay-verify="dataType" autocomplete="off" placeholder="请输入资源别名" class="layui-input dataType">
								</div>
							</div> -->
							<div class="layui-form-item halfArtificiaChild disabledNone sourceTable">
							    <label class="layui-form-label" style="font-size: 14px;">当前资源关键字</label>
							    <div class="layui-input-block">
							      <!-- <input type="text" name="keyword" lay-verify="keyword" autocomplete="off" placeholder="请输入资源关键字,便于进行分类" class="layui-input keyWord"> -->

									<div class="layui-btn-group keyWordLable">
										<button type="button" class="layui-btn layui-btn-primary" id="showKeyWordPop">添加关键字 <i class="layui-icon layui-icon-add-circle"></i></button>
									</div>

									<div class="keyWordPop disabledNone">
										<h6>关键字
											<span style="font-size: 12px;">自定义<input type="checkbox" lay-filter="customKeyword" name="close" lay-skin="switch" lay-text="ON|OFF"></span>
											<span id="closeKeyWordPop" style="float: right;cursor: pointer;">X</span>
										</h6>
										<div class="inputKeyWord disabledNone">
											<input type="text" name="keyword" lay-verify="keyword" autocomplete="off" placeholder="请输入关键字, Enter键可添加自定义关键字" class="layui-input keyWord">
										</div>
										<div class="chooseKeywordBox">
											<select name="modules" lay-verify="required" lay-search="">
											  <option value="">输入关键字搜索进行选择</option>

											</select>
										</div>
										<div class="chooseKeywordBox" style="display: flex;height: 200px;margin: 10px 0;">
											<div class="classifyBox">
												<ul>

												</ul>
											</div>
											<div class="keywordBox" style="width: 100%;">

											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="halfArtificiaChild disabledNone" style="color: red;margin-bottom: 10px;font-size: 14px;">注：选择资源文件后，再选择规则文件，点击上传文件，解析出数据结构，点击下方资源表或者字段进行设置</div>
							<div class="fullArtificiaChild disabledNone" style="color: red;margin-bottom: 10px;font-size: 14px;">注：选择规则文件，点击执行文件，可查看结果</div>
							<div class="layui-form-item" style="position: relative;">
							    <!-- <label class="layui-form-label"></label>
							    <div class="layui-input-block">
							      <input type="checkbox" name="like1" lay-filter="checkedAllData" lay-skin="primary" title="全选">
							    </div> -->
								<div style="position: relative;">
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3 halfArtificiaChild disabledNone" id="uploadFile" style="font-size: 12px;">上传文件</button>
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3 fullArtificiaChild disabledNone" id="executionFile" style="font-size: 12px;">执行自动获取</button>
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3 halfArtificiaChild disabledNone" id="addResourcesTable" style="font-size: 12px;">新增资源结构</button>
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3 halfArtificiaChild disabledNone" id="saveResourcesTable" style="font-size: 12px;">保存资源结构</button>
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3 halfArtificiaChild disabledNone" id="saveResourcesCont" style="font-size: 12px;">保存资源内容</button>
									<!-- <button class="btn btn-sm btn-cyan btn-round text-white mt-3 disabledNone" id="prePageResources" style="font-size: 12px;">上一页</button>
									<button class="btn btn-sm btn-cyan btn-round text-white mt-3 disabledNone" id="nextPageResources" style="font-size: 12px;">下一页</button> -->
								</div>


							</div>
							<div id="treeStructure" class="demo-transfer"></div>
							<div id="treeStructurePage"></div>
							<!-- <div style="margin-top: 10px;">
								<button class="btn btn-xs btn-cyan btn-round text-white mt-3" style="float: right;" id="submitForm2">提交资源</button> -->
								<!-- <button class="btn btn-sm btn-cyan btn-round text-white mt-3" style="float: right;margin-right: 5px;" id="saveForm2">保存</button>
							</div> -->
						</div>

					</div>




				</form>
			</div>
		</section>



		<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
		<script src="vendor/jquery.min.js" type="text/javascript"></script>
		<script src="./assets/layui/layui.js" type="text/javascript"></script>
		<script src="js/tool.js" type="text/javascript"></script>
		<script src="js/mySpace/setDataResources.js" type="text/javascript"></script>

</body>

</html>
